require('../css/commCss/normalize.css')
require('../css/commCss/reset.css')
require('../css/commCss/property.css')
require('../lib/flexible')
require('../font/iconfont.css')
require('../css/commCss/footer.less')
require('../css/course.less')
    //引入axios
const axios = require('axios')
    //导入util
const util = require('../util/util')

document.addEventListener('DOMContentLoaded', function() {
    util.fixBottomNav('running')

    /* 获取元素 */
    const newCourse = document.querySelector('#newCourse')
    const name = document.querySelector('#name')
    const desc = document.querySelector('#desc')
    const courseList = document.querySelector('#courseList')
    const advance = document.querySelector('.advance')

    // let id = localStorage.id
    // console.log(id);
    // let userId = localStorage.userId
    // console.log(userId);

    //渲染数据
    axios.get('http://139.9.177.51:8099/sports/allcourse')
        .then(function(res) {
            let data = res.data.data
            console.log(data);
            //filter过滤出latest===1的新课程数组
            let newCourseArr = data.filter(function(item) {
                    return item.latest === 1
                })
                //filter过滤出latest===0的程数组
            let courseListArr = data.filter(function(item) {
                return item.latest === 0
            })
            name.textContent = newCourseArr[0].name
            desc.textContent = newCourseArr[0].desc
            imgurl.src = 'http://139.9.177.51:8099' + newCourseArr[0].imgurl
                //设置最新课程自定义属性cid为newCourseArr数组第一个[0]的courseId属性值
                // ['cid']和.cid意义意义
                // newCourse.dataset['cid'] = newCourseArr[0].courseId
            newCourse.dataset.cid = newCourseArr[0].courseId


            courseList.innerHTML = courseListArr.map(function(item) {
                return `
                <li class="advance" style="background:url('http://139.9.177.51:8099${item.imgurl}') no-repeat;background-size:cover" data-cid='${item.courseId}'>
                    <div class="adv-top">${item.name}</div>
                    <div class="adv-bottom">
                    ${item.desc}
                    </div>
                </li>
                `
            }).join('')

        })

    newCourse.addEventListener('click', function() {
        //获取自定义属性data-cid的值 
        // let cid = newCourse.dataset['cid']
        let cid = newCourse.dataset.cid
            //存储到临时会话存储
        sessionStorage.cid = cid
        location.href = './introduce.html'
    })

    courseList.addEventListener('click', function(e) {

        // nodename节点名(大写)
        //目标元素closest()向上找元素li
        //li元素的自定义属性data-cid,值赋给cid
        // let cid = e.target.closest('li').dataset['cid']
        let cid = e.target.closest('li').dataset.cid
            // console.log(cid);
            //存储到临时会话存储
        sessionStorage.cid = cid
        console.log(cid);
        location.href = './introduce.html'
    })

    //#region
    // newCourse.addEventListener('click', function() {
    //     let cid = newCourse.dataset.cid
    //     sessionStorage.cid = cid
    //     location.href = 'introduce.html'
    // })

    // courseList.addEventListener('click', function(e) {
    //         let cid = e.target.closest('li').dataset.cid
    //         sessionStorage.cid = cid
    //         location.href = 'introduce.html'
    //     })
    //#endregion

})